<template>
	<!-- 表格 -->
	<div class="table">
		<div :class="{search:1,searchMore}">
			<el-form :model="formData" class="demo-form-inline">
				<el-form-item label="审批人">
					<el-input v-model="formData.user" placeholder="审批人"></el-input>
				</el-form-item>
				<el-form-item label="活动区域">
					<el-select v-model="formData.region" placeholder="活动区域">
						<el-option label="区域一" value="shanghai"></el-option>
						<el-option label="区域二" value="beijing"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div class="search_footer">
				<el-button icon="el-icon-search" :loading='loading' type="primary" @click="getList">查询</el-button>
				<el-button icon="el-icon-refresh-right" :loading='loading' type="primary"
					@click="refresh">重置</el-button>
				<el-button v-no-more-click icon="el-icon-plus" type="primary" @click="add">新增</el-button>
				<el-button :loading='loading' icon="el-icon-upload" type="primary" @click="">导入</el-button>
				<el-button :loading='loading' icon="el-icon-document" type="primary" @click="">导出</el-button>
				<el-button v-no-more-click icon="el-icon-document" type="danger"
					:disabled="multipleSelection.length <= 0" @click="">删除</el-button>
			</div>
		</div>
		<XwTable @refresh="getList" @searchMoreChange="searchMoreChange" style="height: calc(100% - 40px);">
			<el-table :data="tableData" :stripe="stripe" v-loading='loading' ref="multipleTable"
				@selection-change="handleSelectionChange">
				<el-table-column type="selection" width="60" align="center" />
				<el-table-column type="index" label="序号" width="180" />
				<el-table-column prop="index" label="征" />
			</el-table>
		</XwTable>
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
			:page-sizes="[10, 50, 100, 200]" :page-size="limit" layout="total, sizes, prev, pager, next, jumper"
			:total="total" slot="footer">
		</el-pagination>
		<el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
			<span>这是一段信息</span>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		// mixins: [tableMixins],
		data() {
			return {
				dialogVisible: false,
				multipleSelection: [],
				stripe: false,
				searchMore: false,
				page: 1,
				limit: 10,
				total: 0,
				loading: false,
				tableData: [{
					index: 123456
				}],
				formData: {
					key: 'name',
					value: null,
					type: 'text'
				},
				searchShow: false
			}
		},
		created() {
			this.getList()
		},
		methods: {
			add() {
				this.dialogVisible = true
			},
			searchMoreChange(e) {
				this.searchMore = e
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			switchChange(e) {
				this.stripe = e
			},
			handleSizeChange() {},
			handleCurrentChange() {},
			refresh() {
				for (var key in this.formData) {
					this.$set(this.formData, key, "");
				}
				this.page = 1
				this.getList()
			},
			getList() {
				this.loading = true
				setTimeout(() => {
					this.loading = false
					this.tableData = []
					for (var i = 1; i < 48; i++) {
						this.tableData.push({
							index: '123456的' + i
						})
					}
				}, 1000)
			},
		}
	}
</script>

<style lang="scss">
	.table {
		display: flex;
		flex-direction: column;
		background: var(--xw-content-bgcolor);

		.el-pagination {
			margin: 10px;
		}

		.search {
			height: 50px;
			padding: 0 15px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			transition: all .3s;

			.el-form {
				flex: 1;
				height: 100%;
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				overflow: hidden;
			}

			.el-form-item {
				height: 50px;
				display: flex;
				align-items: center;
				margin-bottom: 0;
				margin-left: 15px;
			}

			&_footer {
				display: flex;
				align-items: flex-end;
			}
		}

		.searchMore {
			height: auto;
		}
	}
</style>